<template>
  <el-breadcrumb
    separator="/"
    class="mb-1"
    :class="{ 'mx-1': useLocale.isMob }"
    style="vertical-align: bottom"
  >
    <el-breadcrumb-item>
      <div class="flex align-center">
        <el-icon :size="18"> <Monitor /> </el-icon
        ><span class="pl">广告推广</span>
      </div>
    </el-breadcrumb-item>
    <el-breadcrumb-item>充值记录</el-breadcrumb-item>
  </el-breadcrumb>
  <el-row :gutter="15">
    <el-col :xs="8" :sm="8" :md="8" class="mb-15 mt-1">
      <div class="mob-card primarybg">
        <el-statistic class="py-1" title="当前余额" :value="rel.current_amount" />
      </div>
    </el-col>
    <el-col :xs="8" :sm="8" :md="8" class="mb-15 mt-1">
      <div class="mob-card dangerbg">
         <el-statistic class="pt-1" title="上次充值" :value="rel.last_amount" />
         <div class="font-sm text-tips-color mt pb-1">{{rel.last_date}}</div>
      </div>
    </el-col>
     <el-col :xs="8" :sm="8" :md="8" class="mb-15 mt-1">
      <div class="mob-card bluebg">
         <el-statistic class="py-1" title="累计充值" :value="rel.total_amount" />
      </div>
    </el-col>
  </el-row>

  <div v-if="useLocale.isMob">
    <div class="mx-15 my-15 flex justify-between">
      <el-button
          type="primary"
          size="small"
          plain
          round
          @click="handleRecharge"
          >充值</el-button
        >
      <el-button
        :icon="Search"
        size="small"
        circle
        @click="
          () => {
            rel.mobFilter = true;
          }
        "
      />
    </div>

    <div class="mob-list mt-1">
      <el-scrollbar ref="scrollbarRef" class="mob-scroll">
        <div
          class="mob-list-item text-content-color font"
          v-for="(item, index) in tableData"
        >
          <div class="flex justify-between py">
            <div
              class="text-ellipsis font-mder text-main-color"
              style="width: 70%"
            >
              {{ item.amount }}
            </div>
            <div>
              {{ item.date }}
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <div v-if="rel.total > params.page_size" class="my-1 flex justify-center">
      <el-pagination
        v-model:current-page="params.current_page"
        v-model:page-size="params.page_size"
        :pager-count="5"
        :small="false"
        :disabled="false"
        :background="true"
        layout="prev, pager, next"
        :total="rel.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <el-card v-else class="box-card" shadow="hover">
    <template #header>
      <div class="flex justify-between flex-wrap">
      <el-space wrap :size="10">
        <el-date-picker
          v-model="rel.date"
          type="daterange"
          range-separator="To"
          start-placeholder="開始日期"
          end-placeholder="結束日期"
          :editable="false"
          value-format="YYYY-MM-DD"
          :disabled-date="disabledDateFun"
        />
        <el-button :icon="Search" plain @click="search">查詢</el-button>
      </el-space>
       <el-button type="primary" plain @click="handleRecharge"
          >充值</el-button
        >
  </div>
    </template>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="date" label="日期" />
      <el-table-column prop="amount" :label="'充值金额'+rel.currency" />
    </el-table>
    <div v-if="rel.total > params.page_size" class="mt-2 flex justify-center">
      <el-pagination
        v-model:current-page="params.current_page"
        v-model:page-size="params.page_size"
        :page-sizes="[20, 40, 60]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, nex"
        :pager-count="9"
        :total="rel.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <el-drawer :z-index="999" v-model="rel.mobFilter" size="80%">
    <template #header>
      <h4>{{ $t("common.filter") }}</h4>
    </template>
    <template #default>
      <el-space direction="vertical" fill style="width: 100%">


        <div class="mb-1">
          <div class="font-sm text-tips-color mb">日期范围</div>
          <el-input
            v-model="rel.dateDesc"
            style="width: 100%"
            placeholder="请选择日期范围"
            :prefix-icon="Calendar"
            @click="mobOpenDate"
          />
        </div>
      </el-space>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="mobClearFilter">{{ $t("common.clear") }}</el-button>
        <el-button type="primary" @click="search">{{
          $t("common.query")
        }}</el-button>
      </div>
    </template>
  </el-drawer>
  <nut-calendar
    v-model:visible="rel.visible"
    type="range"
    :default-value="rel.date"
    :start-date="rel.start"
    :end-date="rel.end"
    @choose="mobChooseDate"
  >
  </nut-calendar>
</template>
<script lang="ts" setup>
import { nextTick, ref, onMounted, reactive, watch, computed } from "vue";
import { Search, Monitor, Calendar } from "@element-plus/icons-vue";
import { $rechargeRecord } from "@api/promotion";
import { dayjs } from "element-plus";
import { useLocaleStore } from "@/store/locales";
import { useRouter} from "vue-router";
import { useI18n } from "vue-i18n";
const router = useRouter();
const { t } = useI18n();
const langkey = computed(() => useLocale.locale);
const useLocale = useLocaleStore();
let defaultEnd = dayjs().subtract(1, "day");
const params = ref({
  current_page: 1,
  page_size: 10,
  start_time: "",
  end_time: "",
});
const scrollbarRef = ref();
const rel = reactive({
  date: [],
  total: 0,
  current_amount: 0,
  last_amount: 0,
  last_date: "2020-01-01",
  total_amount: 0,
  mobFilter: false,
  visible: false,
  dateDesc: "", //手机日期描述
  start: "2024-01-01",
  end: dayjs(defaultEnd).format("YYYY-MM-DD"),
  currency:useLocale.dictionary.currency,//币种
});
const tableData = ref([]);
onMounted(() => {
  getData();
});
const getData = async () => {
  if (rel.date.length != 0) {
    params.value.start_time = rel.date[0];
    params.value.end_time = rel.date[1];
  } else {
    params.value.start_time = "";
    params.value.end_time = "";
  }
  console.log(params);
  let res = await $rechargeRecord(params.value);
  if (res.code == 0) {
    tableData.value = res.data.table;
    rel.total = res.data.total;
    rel.current_amount = res.data.current_amount;
    rel.last_amount = res.data.last_amount;
    rel.last_date = res.data.last_date;
    rel.total_amount = res.data.total_amount;
    if (useLocale.isMob) {
      nextTick(() => {
        scrollbarRef.value.setScrollTop(0);
      });
    }
  }
};
const handleSizeChange = (val: number) => {
  params.value.page_size = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  params.value.current_page = val;
  getData();
};
const search = () => {
  getData();
};
const handleClick = (tab: TabsPaneContext, event: Event) => {
  getData();
};
const handleRecharge = () => {
router.push("/promotion/recharge");
};

const disabledDateFun = (date) => {
  let now = dayjs().subtract(1, "day");
  if (date < now) return false;
  return true;
};

const mobOpenDate = () => {
  rel.visible = true;
};
const mobCloseDate = () => {
  rel.visible = false;
};
const mobChooseDate = (param) => {
  console.log(param);

  rel.date = [...[param[0][3], param[1][3]]];

  rel.dateDesc = `${rel.date[0]} To ${rel.date[1]}`;
};
const mobClearFilter = () => {
  params.value.current_page = 1;
  params.value.page_size = 10;
  rel.date = [];
  rel.dateDesc = "";
  getData();
};
watch(langkey, (newVal, oldVal) => {
  getData();
});
</script>

<style lang="scss" scoped>
.mob-scroll {
  height: calc(100vh - 350px);
}
.mob-card {
  height: 100%;
  text-align: center;
  border-radius: 10px;
  background: #fff;
  width: 100%;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
  &:hover {
    box-shadow: var(--el-box-shadow-light);
  }
  .content {
  }
}
.dangerbg {
  background-color: var(--el-color-error-light-9);
  border: 1px solid var(--el-color-error-light-8);
}
.primarybg {
  background-color: var(--el-color-primary-light-9);
  border: 1px solid var(--el-color-primary-light-8);
}
.bluebg {
  background-color: var(--el-color-blue-light-9);
  border: 1px solid var(--el-color-blue-light-8);
}
</style>
